<template>
  <div class="container">
    <Row class="btn-action">
      <Col span="19" v-if="companyCode === 'LM'">
        <Button type="primary" class="mp10" href="fcAllDataStr" @click="exportData()"><Icon type="ios-download-outline"></Icon>导出</Button>
        <Button type="primary" class="mp10" href="fcAllDataStr" @click="selectlist2()" style="margin-left:5px"><Icon type="md-search" /></Icon>刷新</Button>
      </Col>
      <Col span="5" v-if="companyCode === 'LM'">
        <Button type="success" class="mp10" href="fcAllDataStr" @click="showzdgk()">重点管控</Button>
        <Button type="success" class="mp10" href="fcAllDataStr" @click="showzdgz()" style="margin-left:5px">重点关注</Button>
      </Col>
    </Row>
    <Table :loading="countData.loading" border  :columns="columns" :data="DataList" size="small" ref="table">
    </Table>
    <Drawer title="重点管控" width="1000" :closable="false" v-model="zdgk.isshow">
        <Row class="btn-action">
          <Col span="5">
            <Input v-model="ssrow_name" style="margin-right:5px" placeholder="请输入搜索标签" />
          </Col>
          <Col span="1"></Col>
          <Col span="5">
            <Select v-model="ssdel_flag" placeholder="请选择下拉框是否显示">
                <Option>全部</Option>
                <Option value="0">显示</Option>
                <Option value="1">不显示</Option>
              </Select>
          </Col>
          <Col span="1"></Col>
           <Col span="2">
            <Button @click="findZDGPage()" type="primary"> <Icon type="ios-search" />搜索</Button>
          </Col>
          <Col span="2">
            <Button @click="zdgk.add.isshow = true" type="success"> <Icon type="ios-add"/></Icon>添加</Button>
          </Col>
        </Row>
        <Table border  :columns="zdgk.columns" :data="zdgk.list" size="small" ref="table" style="margin-top:10px">
        <template slot-scope="{ row }" slot="del_flag">
          <span v-if="row.del_flag == '0'">显示</span>
          <span v-if="row.del_flag == '1'">不显示</span>
        </template>
        <template slot-scope="{ row }" slot="showtable">
          <span v-if="row.showtable == '1'">显示</span>
          <span v-else>不显示</span>
        </template>
        <template slot-scope="{ row }" slot="caozuo">
          <Button @click="xlkxs(row)" style="margin-right:5px" type="success" v-if="row.del_flag == '1'"  size="small">下拉框显示</Button>
          <Button @click="xlkbxs(row)" style="margin-right:5px" type="error" v-if="row.del_flag == '0'" size="small">下拉框不显示</Button>
          <Button @click="tjbbxs(row)" style="margin-right:5px" type="error" v-if="row.showtable == '1'" size="small">统计表不显示</Button>
          <Button @click="tjbxs(row)" type="success" v-else size="small">统计表显示</Button>
        </template>
        </Table>
    </Drawer>
    <Drawer
            title="添加重点管控"
            v-model="zdgk.add.isshow"
            width="720"
            :mask-closable="false"
            :styles="styles"
        >
          <Form :model="zdgk.add.formData">
              <Row :gutter="32">
                  <Col span="12">
                      <FormItem label="标签" label-position="top">
                          <Input v-model="zdgk.add.formData.label" placeholder="请输入标签，例：辽宁省沈阳市" />
                      </FormItem>
                  </Col>
                  <Col span="12">
                      <FormItem label="键值" label-position="top">
                          <Input v-model="zdgk.add.formData.value" placeholder="请输入键值，例：lnssys" />
                      </FormItem>
                  </Col>
              </Row>
              <Row :gutter="32">
                  <Col span="12">
                      <FormItem label="下拉框排序" label-position="top">
                          <Input v-model="zdgk.add.formData.sort" placeholder="请输入下拉框排序，例：10" />
                      </FormItem>
                  </Col>
                  <Col span="12">
                      <FormItem label="统计表排序" label-position="top">
                          <Input v-model="zdgk.add.formData.asort" placeholder="请输入统计表排序，例：10" />
                      </FormItem>
                  </Col>
              </Row>
              <Row :gutter="32">
                  <Col span="12">
                      <FormItem label="是否在下拉框显示" label-position="top">
                          <i-switch v-model="showdict" />
                      </FormItem>
                  </Col>
                  <Col span="12">
                      <FormItem label="是否在统计表显示" label-position="top">
                          <!-- <Switch v-model="showtable" /> -->
                          <i-switch v-model="showtable" />
                      </FormItem>
                  </Col>
              </Row>
          </Form>
          <div class="demo-drawer-footer">
              <Button style="margin-right: 8px" @click="zdgk.add.isshow = false">关闭</Button>
              <Button type="primary" @click="addZDGK()">添加</Button>
          </div>
    </Drawer>
    <Drawer title="重点关注" width="1000" :closable="false" v-model="zdgz.isshow">
        <Row class="btn-action">
          <Col span="5">
            <Input v-model="ssrow_name" style="margin-right:5px" placeholder="请输入搜索标签" />
          </Col>
          <Col span="1"></Col>
          <Col span="5">
            <Select v-model="ssdel_flag" placeholder="请选择下拉框是否显示">
                <Option>全部</Option>
                <Option value="0">显示</Option>
                <Option value="1">不显示</Option>
              </Select>
          </Col>
          <Col span="1"></Col>
           <Col span="2">
            <Button @click="findZDZPage()" type="primary"> <Icon type="ios-search" />搜索</Button>
          </Col>
          <Col span="2">
            <Button @click="zdgz.add.isshow = true" type="success"> <Icon type="ios-add"/></Icon>添加</Button>
          </Col>
        </Row>
        <Table border  :columns="zdgz.columns" :data="zdgz.list" size="small" ref="table" style="margin-top:10px">
        <template slot-scope="{ row }" slot="del_flag">
          <span v-if="row.del_flag == '0'">显示</span>
          <span v-if="row.del_flag == '1'">不显示</span>
        </template>
        <template slot-scope="{ row }" slot="caozuo">
          <Button @click="xlkxs2(row)" style="margin-right:5px" type="success" v-if="row.del_flag == '1'"  size="small">下拉框显示</Button>
          <Button @click="xlkbxs2(row)" style="margin-right:5px" type="error" v-if="row.del_flag == '0'" size="small">下拉框不显示</Button>
        </template>
        </Table>
    </Drawer>
    <Drawer
            title="添加重点关注"
            v-model="zdgz.add.isshow"
            width="720"
            :mask-closable="false"
            :styles="styles"
        >
          <Form :model="zdgz.add.formData">
              <Row :gutter="32">
                  <Col span="12">
                      <FormItem label="标签" label-position="top">
                          <Input v-model="zdgz.add.formData.label" placeholder="请输入标签，例：辽宁省沈阳市" />
                      </FormItem>
                  </Col>
                  <Col span="12">
                      <FormItem label="键值" label-position="top">
                          <Input v-model="zdgz.add.formData.value" placeholder="请输入键值，例：lnssys" />
                      </FormItem>
                  </Col>
              </Row>
              <Row :gutter="32">
                  <Col span="12">
                      <FormItem label="下拉框排序" label-position="top">
                          <Input v-model="zdgz.add.formData.sort" placeholder="请输入下拉框排序，例：10" />
                      </FormItem>
                  </Col>
                  <Col span="12">
                      <FormItem label="是否在下拉框显示" label-position="top">
                          <div class="ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text">
                            <i-switch v-model="showdict" />
                          </div>
                      </FormItem>
                  </Col>
              </Row>
          </Form>
          <div class="demo-drawer-footer">
              <Button style="margin-right: 8px" @click="zdgz.add.isshow = false">关闭</Button>
              <Button type="primary" @click="addZDGZ()">添加</Button>
          </div>
    </Drawer>
  </div>
</template>

<script>
import { findRowNameValue2List, flidAllzdgkList, saveLaber, saveLaber2, findZDGPage, changeShowTable, changeShow, changeShow2, findZDGZPage } from '@/api/yi-qing-fang-kong'
import { date2str } from '@/api/eventlist'
export default {
  name: 'superior-list',
  data () {
    return {
      DataList: [],
      showtable: false,
      showdict: false,
      ssrow_name: '',
      ssdel_flag: '',
      zdgk: {
        isshow: false,
        add: {
          formData: {
            value: '',
            label: '',
            sort: '',
            showtable: '',
            showdict: '',
            asort: ''
          },
          isshow: false
        },
        list: [],
        loading: false,
        columns: [
          { title: '标签', key: 'label', align: 'center' },
          { title: '键值', key: 'value', align: 'center' },
          { title: '下拉框排序', key: 'sort', align: 'center' },
          { title: '统计表排序', key: 'asort', align: 'center' },
          { title: '下拉框是否显示', slot: 'del_flag', align: 'center' },
          { title: '统计表是否显示', slot: 'showtable', align: 'center' },
          { title: '操作', slot: 'caozuo', width: 250, align: 'center' }
        ]
      },
      zdgz: {
        isshow: false,
        add: {
          formData: {
            value: '',
            label: '',
            sort: '',
            showtable: '',
            showdict: '',
            asort: ''
          },
          isshow: false
        },
        list: [],
        loading: false,
        columns: [
          { title: '标签', key: 'label', align: 'center' },
          { title: '键值', key: 'value', align: 'center' },
          { title: '下拉框排序', key: 'sort', align: 'center' },
          { title: '下拉框是否显示', slot: 'del_flag', align: 'center' },
          { title: '操作', slot: 'caozuo', width: 250, align: 'center' }
        ]
      },
      styles: {
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
      countData: { loading: false, fcnum: 0, ytbnum: 0, zcnum: 0 },
      columns: [
        // { title: '区县', key: 'city', width: 200, align: 'center' },
        // { title: '境外入沈居家隔离人员', key: 'num1', width: 100, align: 'center' },
        // { title: '密接居家隔离人员', key: 'num3', width: 100, align: 'center' },
        // { title: '社区健康监测人员', key: 'num4', width: 100, align: 'center' },
        // { title: '暴露人群居家隔离群人员', key: 'num34', width: 100, align: 'center' },
        // { title: '云南省瑞丽市', key: 'num20', width: 100, align: 'center' },
        // { title: '云南省德宏州', key: 'num35', width: 100, align: 'center' },
        // { title: '广东省广州市', key: 'num70', width: 100, align: 'center' },
        // { title: '福建省厦门市', key: 'num71', width: 100, align: 'center' },
        // { title: '福建省莆田市', key: 'num73', width: 100, align: 'center' },
        // { title: '福建省泉州市', key: 'num74', width: 100, align: 'center' },
        // { title: '福建省漳州市', key: 'num75', width: 100, align: 'center' },
        // { title: '黑龙江省哈尔滨市', key: 'num76', width: 100, align: 'center' }
      ]
    }
  },
  computed: {
    companyCode () {
      return this.$store.state.user.severUserInfo.company_code
    }
  },
  watch: {
  },
  methods: {
    selectlist2 () {
      this.$Notice.info({
        title: '查询统计中，请耐心等候~~',
        desc: ''
      })
      this.countData.loading = true
      flidAllzdgkList().then(res => {
        if (res.data.errcode === 0) {
          this.DataList = res.data.data
          this.countData.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
        }
      })
      setTimeout(() => {
        this.selectrowtitlelist()
      }, 1500)
    },
    findZDGPage () {
      this.zdgk.loading = true
      let params = {
        row_name: this.ssrow_name,
        del_flag: this.ssdel_flag,
        pageSize: 300
      }
      findZDGPage(params).then(res => {
        if (res.data.errcode === 0) {
          this.zdgk.list = res.data.data.results
          this.zdgk.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    findZDZPage () {
      this.zdgz.loading = true
      let params = {
        row_name: this.ssrow_name,
        del_flag: this.ssdel_flag,
        pageSize: 300
      }
      findZDGZPage(params).then(res => {
        if (res.data.errcode === 0) {
          this.zdgz.list = res.data.data.results
          this.zdgz.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    // 统计表不显示
    tjbbxs (row) {
      this.$Modal.confirm({
        title: '确认设置为统计表不显示？',
        onOk: () => {
          console.log(row)
          let params = {
            id: row.id,
            showtable: '0',
            value: row.value,
            label: row.label,
            del_flag: row.del_flag,
            showdict: '1'
          }
          changeShowTable(params).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({
                title: '',
                desc: '操作成功'
              })
              this.findZDGPage()
            } else {
              this.$Notice.error({
                title: '操作失败',
                desc: res.data.errmsg
              })
            }
          })
        }
      })
    },
    // 统计表显示
    tjbxs (row) {
      this.$Modal.confirm({
        title: '确认设置为统计表显示？',
        onOk: () => {
          console.log(row)
          let params = {
            id: row.id,
            showtable: '1',
            value: row.value,
            label: row.label,
            del_flag: row.del_flag,
            showdict: '1'
          }
          changeShowTable(params).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({
                title: '',
                desc: '操作成功'
              })
              this.findZDGPage()
            } else {
              this.$Notice.error({
                title: '操作失败',
                desc: res.data.errmsg
              })
            }
          })
        }
      })
    },
    // 下拉框不显示
    xlkbxs (row) {
      this.$Modal.confirm({
        title: '确认设置为下拉框不显示？',
        onOk: () => {
          console.log(row)
          let params = {
            id: row.id,
            showdict: '0',
            del_flag: '1',
            value: row.value
          }
          changeShow(params).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({
                title: '',
                desc: '操作成功'
              })
              this.findZDGPage()
            } else {
              this.$Notice.error({
                title: '操作失败',
                desc: res.data.errmsg
              })
            }
          })
        }
      })
    },
    // 下拉框显示
    xlkxs (row) {
      this.$Modal.confirm({
        title: '确认设置为下拉框显示？',
        onOk: () => {
          console.log(row)
          let params = {
            id: row.id,
            showdict: '1',
            del_flag: '0',
            value: row.value
          }
          changeShow(params).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({
                title: '',
                desc: '操作成功'
              })
              this.findZDGPage()
            } else {
              this.$Notice.error({
                title: '操作失败',
                desc: res.data.errmsg
              })
            }
          })
        }
      })
    },
    // 下拉框不显示
    xlkbxs2 (row) {
      this.$Modal.confirm({
        title: '确认设置为下拉框不显示？',
        onOk: () => {
          console.log(row)
          let params = {
            id: row.id,
            showdict: '0',
            del_flag: '1',
            value: row.value
          }
          changeShow2(params).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({
                title: '',
                desc: '操作成功'
              })
              this.findZDZPage()
            } else {
              this.$Notice.error({
                title: '操作失败',
                desc: res.data.errmsg
              })
            }
          })
        }
      })
    },
    // 下拉框显示
    xlkxs2 (row) {
      this.$Modal.confirm({
        title: '确认设置为下拉框显示？',
        onOk: () => {
          console.log(row)
          let params = {
            id: row.id,
            showdict: '1',
            del_flag: '0',
            value: row.value
          }
          changeShow2(params).then(res => {
            if (res.data.errcode === 0) {
              this.$Notice.success({
                title: '',
                desc: '操作成功'
              })
              this.findZDZPage()
            } else {
              this.$Notice.error({
                title: '操作失败',
                desc: res.data.errmsg
              })
            }
          })
        }
      })
    },
    change (status) {
      this.$Message.info('开关状态：' + status)
    },
    selectrowtitlelist () {
      let that = this
      this.countData.loading = true
      findRowNameValue2List().then(res => {
        if (res.data.errcode === 0) {
          let newrow = []
          res.data.data.forEach((item, index) => {
            let onerow = { title: item.row_name, key: item.row_value, width: item.width, align: 'center' }
            if (item.row_value === 'city') {
              onerow = { title: item.row_name, key: item.row_value, width: item.width, align: 'center', fixed: 'left' }
              newrow.push(onerow)
            } else if (that.DataList[13][item.row_value] > 0) {
              newrow.push(onerow)
            }
            // console.log(this.DataList[13][item.row_value], '======' + item.row_value)
            // if (this.DataList[13][item.row_value] > 0) {
            //   newrow.push(onerow)
            // }
          })
          that.columns = newrow
          this.countData.loading = false
        } else {
          this.$Notice.error({
            title: '查询信息失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addZDGZ () {
      let params = this.zdgz.add.formData
      params.showdict = this.showdict
      params.del_flag = !this.showdict
      saveLaber2(params).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '',
            desc: '添加成功'
          })
          this.zdgz.add = {
            formData: {
              value: '',
              label: '',
              sort: '',
              showtable: '',
              showdict: '',
              asort: ''
            },
            isshow: false
          }
          this.findZDZPage()
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    addZDGK () {
      let params = this.zdgk.add.formData
      params.showtable = this.showtable
      params.showdict = this.showdict
      params.del_flag = !this.showdict
      saveLaber(params).then(res => {
        if (res.data.errcode === 0) {
          this.$Notice.success({
            title: '',
            desc: '添加成功'
          })
          this.zdgk.add = {
            formData: {
              value: '',
              label: '',
              sort: '',
              showtable: '',
              showdict: '',
              asort: ''
            },
            isshow: false
          }
          this.findZDGPage()
        } else {
          this.$Notice.error({
            title: '添加失败',
            desc: res.data.errmsg
          })
        }
      })
    },
    exportData () {
      let today = new Date()
      this.$refs.table.exportCsv({
        filename: '社区管控重点人群统计表' + date2str(today)
      })
    },
    showzdgk () {
      this.findZDGPage()
      this.zdgk.isshow = true
    },
    showzdgz () {
      this.findZDZPage()
      this.zdgz.isshow = true
    }
  },
  mounted () {
    this.selectlist2()
  }
}
</script>

<style scoped>
  .page_style {
    margin: 20px 5px;
  }

  .input-frame {
    width: 120px;
    margin-right: 10px;
  }

  .house-list > .group {
    background: white;
    padding: 10px;
    margin-top: 10px;
  }

  .house-list > .group > .item {
    border-bottom: 1px solid #f5f5f5;
    padding: 10px 0;
  }

  .house-list > .group > .item .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
  }

  .house-list > .group > .item .title {
    font-size: 14px;
    color: #333333;
  }

  .house-list > .group > .item .address {
    font-size: 12px;
    color: gray;
    display: flex;
    align-items: center;
  }

  .house-list > .group > .item .detail {
    font-size: 12px;
    color: dodgerblue;
  }

  .opt-area-02 {
    display: flex;
    align-items: center;
    flex-direction: column;
    border: 1px solid #abdcff;
    background-color: #f0faff;
    padding: 8px 16px 8px 16px;
    border-radius: 4px;
    margin-bottom: 10px;
  }

  .opt-area-02 .right-con {
    width: 100%;
    margin-top: 5px;
    display: flex;
  }

  .opt-area-02 .left-con {
    font-size: 14px;
    width: 100%;
  }

  .opt-area-02 .left-con span {
    font-weight: bold;
  }

  .opt-area-02 .right-con input {
    width: 150px;
    margin-right: 10px;
  }

  .opt-area-02 .right-con .input-frame {
    width: 200px;
    margin-right: 10px;
  }

  .table-action-btn {
    margin-right: 3px;
  }

  .container >>> .ivu-btn-small {
    height: 24px;
    padding: 0 5px;
    font-size: 12px;
    border-radius: 3px;
  }

  .btn-action {
    margin-bottom: 10px;
  }

  .mp10 {
    margin-right: 10px;
  }
  .title-style {
    color: red;
  }
  .mb20 {
    margin-bottom: 20px;
  }
  .ivu-table-row {
    height: 57px;
  }
  .demo-spin-icon-load{
    animation: ani-demo-spin 1s linear infinite;
  }
  @keyframes ani-demo-spin {
    from { transform: rotate(0deg);}
    50%  { transform: rotate(180deg);}
    to   { transform: rotate(360deg);}
  }
  .demo-spin-col{
    height: 100px;
    position: relative;
    /*border: 1px solid #eee;*/
  }
  .demo-drawer-footer{
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        border-top: 1px solid #e8e8e8;
        padding: 10px 16px;
        text-align: right;
        background: #fff;
    }
</style>
